<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig">
        <span>产品资料</span>
      </div>
      <div>
        <el-button type="primary" @click="record">
          <i class="icon"></i>操作记录
        </el-button> 
        <el-button type="primary">
          <i class="icon"></i>产品上架
        </el-button>
        <el-button type="primary">
          <i class="icon"></i>产品下架
        </el-button>
        <el-button type="primary" @click="add">
          <i class="icon"></i>新增
        </el-button>
        <el-button type="primary" @click="edit">
          <i class="icon"></i>修改
        </el-button>
        <el-button type="primary">
          <i class="icon"></i>删除
        </el-button>
      </div>
    </div>

    <div class="message">     
      <p class="character">
        对产品进行维护。
        <span class="skip">查看帮助文档</span>
      </p>
    </div>
    
    <div class="inputcontent">
      <el-input v-model="search" placeholder="请输入产品名称" class="inSearch" @keydown.native.enter="init"></el-input>
      <div class="iconSearch"></div>
      <el-select v-model="value" placeholder="产品类型" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value" placeholder="产品销售状态" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value" placeholder="产品状态" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" style="height:35px;marginLeft:10px">查询</el-button>
    </div>

    <!-- 主表 -->
    <div class="tableCotent">
      <Table :reset="reset" v-on:getId="getListId" v-on:changeData="changedata"></Table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>

    <!-- 组件表assembly -->
    <div class="table">
      <div style="width:100%;height:40px;border:1px solid #eee;borderBottom:none;marginTop:60px;"><h5 style="marginLeft:20px;marginTop:10px;fontWeight:500;">组件</h5></div>
      <Table1></Table1>
    </div>

    <!-- 操作记录弹出框 -->
    <el-dialog title="操作记录" center :visible.sync="dialogTableVisible">
      <el-table :data="gridData" border >
        <el-table-column align="center" property="date" label="操作人员"></el-table-column>
        <el-table-column align="center" property="name" label="操作"></el-table-column>
        <el-table-column align="center" property="address" label="操作时间"></el-table-column>
        <el-table-column align="center" property="address" label="操作详情"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 新增弹出框 -->
    <el-dialog title="新增产品" center :visible.sync="addDialogVisible" width="1200px" style="marginTop:-50px;">
      <Add></Add>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog title="修改产品" center :visible.sync="editDialogVisible">
      <!-- <Edit></Edit> -->
    </el-dialog>
  </div>
</template>

<script>
import Table from "./components/bomMaterialTable";
import Table1 from "./components/MaterialTable1";
import Add from "./components/MaterialAdd";
export default {
  name:'bomMaterial',
  components:{
    Table,
    Table1,
    Add,
  },
  data () {
    return {
      search: '',
      value:'',
      reset:[],
      gridData:[],
      options:[
        {
          label:'',
          value:''
        },
      ],
      addlist:[],
      currentPage:1,
      dialogTableVisible:false,
      addDialogVisible:false,
      editDialogVisible:false,
      size:10,
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getListId(){

    },
    changedata(data) {
      this.addlist = data;
    },
    // 操作记录
    record(){
      this.dialogTableVisible = true
    },
    // 新增
    add(){
      this.addDialogVisible = true
    },
    // 修改
    edit(){
      if(this.addlist.length === 1){
        this.editDialogVisible = true
      }else{
        this.$message('请勾选一项')
      }     
    }
  },
}
</script>

<style scoped lang="scss">
.sizeBig {
  font-size: 16px;
  font-weight: 600;
  margin-left: 20px;
}

.topBtn {
  height: 60px;
  width: 98%;
  margin: 0 auto;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.message {
  width: 98%;
  margin: 0 auto;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  font-size: 14px;
  .character {
    margin: 20px 0 21px 20px;
    color: #999999;
    .skip {
      color: #0095ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.inputcontent {
  width: 98%;
  margin: 0 auto;
  height: 80px;
  position: relative;
  padding-top: 21px;
  box-sizing: border-box;
  .iconSearch {
    position: absolute;
    left: 277px;
    top: 30px;
    width: 20px;
    height: 20px;
    // background-image: url("./image/搜索.png");
    // background-repeat: no-repeat;
    cursor: pointer;
  }
  .inSearch {
    width: 250px;
    height: 40px;
  }
  .need {
    line-height: 40px;
    span {
      color: #f1022f;
      font-weight: 600;
    }
  }
}
.tableCotent {
  width: 98%;
  margin: 0 auto;
}
.block {
  .el-pagination{
    float: right;
    margin: 15px 20px 20px 0;
  }
}
.table {
  width: 98%;
  margin: 0 auto;
}
</style>